<template>
    <isLoginOk v-if="!isLogin" />
    <!--        时间 单号 类型-->
    <!--<scroll-view style="height: 600rpx" scroll-y>-->

    <!--    form: {-->
    <!--    start_time: '',-->
    <!--    end_time: '',-->
    <!--    order_number: '',-->
    <!--    category_id: '',-->
    <!--    page: 1-->
    <!--    },-->
    <!--    表单结构查询  -->
    <u-sticky >
        <view style="background-color: #fff">

            <u-form labelWidth="150rpx" :form="selectData.form" @submit="selectData.select"
                    style="width: 700rpx;margin: 10rpx auto">
                <u-form-item label="开始时间" prop="start_time"
                             @click="selectData.showDateTime = true;selectData.nowType = 'start_time';">
                    <u-input
                        v-model="selectData.form.start_time"
                        disabled
                        disabledColor="#ffffff"
                        placeholder="请选择时间"
                    ></u-input>
                    <u-icon
                        slot="right"
                        name="arrow-right"
                    ></u-icon>
                </u-form-item>
                <u-form-item label="结束时间" prop="end_time"
                             @click="selectData.showDateTime = true;selectData.nowType = 'end_time';">
                    <u-input
                        v-model="selectData.form.end_time"
                        disabled
                        disabledColor="#ffffff"
                        placeholder="请选择时间"
                        @click="selectData.showDateTime = true;selectData.nowType = 'end_time';"
                    ></u-input>
                    <u-icon
                        slot="right"
                        name="arrow-right"
                    ></u-icon>
                </u-form-item>
                <u-form-item label="单号" prop="order_number">
                    <u-input
                        v-model="selectData.form.order_number" placeholder="请输入单号" />
                </u-form-item>
                <u-form-item label="类型" prop="category_id">
                    <pop-selector v-if="state.selectOptions.length" :select-options="state.selectOptions"
                                  :default-value="state.value" @changeSelect="onChangeMenu">
                        <view>
                            {{ state.selectOptions[state.value]?.label || '未选择' }}
                        </view>
                    </pop-selector>
                </u-form-item>
                <u-form-item>
                    <u-button
                        shape="circle"
                        type="primary"
                        plain
                        size="medium"
                        hover-class="none"
                        :customStyle="{ width: '100%' }"
                        @click="selectData.select();selectData.form.page=1"
                    >
                        查询
                    </u-button>
                    <u-button
                        shape="circle"
                        type="primary"
                        plain
                        size="medium"
                        hover-class="none"
                        :customStyle="{ width: '100%' }"
                        @click="selectData.empty"
                    >
                        清空
                    </u-button>
                    <!--            <u-button type="primary" @click="selectData.select">查询</u-button>-->
                </u-form-item>
            </u-form>
        </view>
    </u-sticky>
    <w-picker
        :visible.sync="selectData.showDateTime"
        mode="date"
        startYear="2017"
        endYear="2029"
        :value="selectData.pickerTime"
        :current="true"
        fields="second"
        @confirm="selectData.onConfirm"
        @cancel="selectData.onCancel"
        :disabled-after="false"
        ref="date"
    ></w-picker>

    <view v-for="item in selectData.list"
          style="width: 650rpx;box-sizing: border-box; margin: 10rpx  auto 0;padding: 20rpx; border-radius: 10rpx; box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.5);">

        <view style="margin-top: 20rpx">
            <view style="display: inline-flex;width: 200rpx">单号</view>
            <text>{{ item.order_number }}</text>
        </view>
        <view style="margin-top: 20rpx">
            <view style="display: inline-flex;width: 200rpx">次数</view>
            <text>{{ item.count }}</text>
        </view>
        <view style="margin-top: 20rpx">
            <view style="display: inline-flex;width: 200rpx">录入时间</view>
            <text>{{ item.timestamp }}</text>
        </view>
        <view style="margin-top: 20rpx">
            <view style="display: inline-flex;width: 200rpx">录入类型</view>
            <text>{{ item.category_name }}</text>
        </view>
        <view style="margin-top: 20rpx">
            <view style="display: inline-flex;width: 200rpx">录入人</view>
            <text>{{ item.real_name }}</text>
        </view>
        <view style="margin-top: 20rpx">
            <view style="display: inline-flex;width: 200rpx">状态</view>
            <text :style="{color:item.status === '正常'?'green':'red'}">{{ item.status }}</text>
        </view>
        <errDetail :order_number="item.order_number" v-if="item.status === '异常'"/>


    </view>
    <view style="margin: 20rpx 0">

        <u-loadmore v-if="selectData.status==='nomore'" :status="selectData.status" />
        <view style="display: flex;justify-content: center" v-else>

            <text style="color: #2979ff;text-decoration: underline" @click="selectData.select" :under-line="true"
                  disabled>
                加载更多
                <u-icon name="arrow-right" color="#2979ff" size="24"></u-icon>
            </text>

        </view>
    </view>
    <!--</scroll-view>-->
    <tabbar />
</template>

<script lang="ts" setup>
import popSelector from '@/uni_modules/wo-pop-selector/components/wo-pop-selector/wo-pop-selector.vue'

import isLoginOk from '@/components/isLogin/index.vue'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
import { reactive } from 'vue'
import { getCategory, getRecord } from '@/api/code'
import { onLoad, onPageScroll, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import errDetail from '@/components/err-Detail/index.vue'
// import datetimePicker from '@/uni_modules/vk-uview-ui/components/u-/datetime-picker/index.vue'

const userStore = useUserStore()
const { userInfo, isLogin } = storeToRefs(userStore)
const onChangeMenu = (data: any) => {
    console.log(data, 'data')

    //查找当前的下标
    const index = state.selectOptions.findIndex((item: any) => item.value === data.value)
    console.log(index, 'index')
    state.value = index
    state.category_id = data.value
    selectData.form.category_id = data.value
}
const state = reactive<{
    meta: any[]
    pages: any[],
    selectOptions: any[],
    value: number,
    orderNumber: string,
    category_id: number,
    nowData: Object
}>({
    meta: [],
    pages: [],
    value: -1,
    selectOptions: [],
    orderNumber: '',
    category_id: 0,
    nowData: {}
})
const selectData = reactive({
    form: {
        start_time: '',
        end_time: '',
        order_number: '',
        category_id: '',
        page: 1
    },
    showDateTime: false,
    nowType: '',
    pickerTime: '',
    list: [],
    status: 'loading',
    select: function() {

        getRecord({
            ...selectData.form
        }).then(res => {
            console.log(res, 'res')
            //每次加载10条 如果小于10条则没有更多数据
            if (res.length < 10) {
                selectData.status = 'nomore'
            }
            if (selectData.form.page === 1) {
                selectData.list = res
            } else {
                selectData.list.push(...res)
            }
            selectData.form.page++
        })
    },
    onConfirm: function(e: any) {
        console.log(e, 'e')
        selectData.showDateTime = false
        selectData.form[selectData.nowType] = e.value
    },
    onCancel: function() {
        selectData.showDateTime = false
    },
    empty: function() {
        selectData.form = {
            start_time: '',
            end_time: '',
            order_number: '',
            category_id: '',
            page: 1
        }
        state.value = -1
    }
})
onLoad(() => {
    console.log('onLoad')
    selectData.select()
})
const getCategoryData = async (isOk: any = false) => {
    state.selectOptions = await getCategory()
    if (isOk) state.category_id = state.selectOptions[0].value
}
getCategoryData(true)
//下拉刷新生命周期
// onPullDownRefresh(() => {
//     selectData.form.page = 1
//     selectData.list = []
//     selectData.select()
//     uni.stopPullDownRefresh()
// })
// //触底生命周期
// onPageScroll(() => {
//     console.log('触底')
//     if (selectData.status === 'nomore') {
//         return
//     }
//     selectData.select()
// })

</script>

<style lang="scss">

</style>
